<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue event</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
      <h1>{{message}}</h1>  
      
      <div>{{res | toFixed(2)}}</div>
      <div>{{res | toFixed(4)}}</div>
   
      <div>{{msg | my}}</div>  
    </div>

    <div id="app2">
        <div>{{msg | my}}</div>
    </div>
  
</body>
<script>
    // 全局
    Vue.filter('my',function(res){
        return 'hello ' + res
    })

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            res: 12.123111,
            msg: 'app !'
        },
        // 局部
        filters: {
            toFixed(input, parmas){
                return input.toFixed(parmas)
            }
        }
    })
   

    new Vue({
        el: "#app2",
        data: { 
            msg : "app2 !"
        }
    })

</script>

</html>